<template>
  <div class="c-picker-box">
    <div class="container">
      <div class="picker">
        <div class="selected-line-box"></div>
        <div class="picker-content">
          <div class="picker-list-box">
            <div class="touchMask" v-ev:swipe.prevent="[swipe,1]"></div>
            <div class="picker-list list1">
            <!-- <div class="picker-list list1" @scroll="scroll1"> -->
              <div class="option-box" :style="'transform:translate3d(0, -' +picker1.top+ 'px, 0)'">
                <div class="option"></div>
                <div class="option"></div>
                <div class="option" v-for="list1 in pickerList1" :class="{'selected': $index === picker1.selectedIndex}"> {{ list1 }} </div>
                <div class="option"></div>
                <div class="option"></div>
              </div>
            </div>
          </div>
          <div class="picker-list-box">
            <div class="touchMask" v-ev:swipe.prevent="[swipe,2]"></div>
            <div class="picker-list list2">
              <div class="option-box" :style="'transform:translate3d(0, -' +picker2.top+ 'px, 0)'">
                <div class="option"></div>
                <div class="option"></div>
                <div class="option" v-for="list2 in pickerList2" :class="{'selected': $index === picker2.selectedIndex}"> {{ list2 }} </div>
                <div class="option"></div>
                <div class="option"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  module.exports = {
    props: {
      'list1': {
        type: Array,
        default: function () {
          var result = []
          for (let i = 0; i < 24; i++) {
            var num = i
            var str = ''
            if (num < 10) {
              str = '0' + num
            } else {
              str = num + ''
            }
            result.push(str)
          }
          return result
        }
      },
      'list1DefaultIndex': {
        type: Number,
        default: 0
      },
      'list2': {
        type: Array,
        default: function () {
          var result = []
          for (let i = 0; i < 60; i++) {
            var num = i
            var str = ''
            if (num < 10) {
              str = '0' + num
            } else {
              str = num + ''
            }
            result.push(str)
          }
          return result
        }
      },
      'list2DefaultIndex': {
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        picker1: {
          selectedIndex: 0,
          top: 0
        },
        picker2: {
          selectedIndex: 0,
          top: 0
        }
      }
    },
    computed: {
      pickerList1 () {
        return this.list1 || []
      },
      pickerList2 () {
        return this.list2 || []
      }
    },
    ready () {
      setTimeout(() => {
        this.init()
      }, 300)
    },
    methods: {
      swipe (num, ev) {
        var self = this
        // 每个选项的高度
        var optionHeight = ev.target.nextElementSibling.getElementsByClassName('option')[2].clientHeight
        // 方向
        var direction = ev.direction
        // 时间
        var duration = ev.duration
        // var selectedIndex = (300 / duration) * self.pickerList1
        // 速度 0~1
        var speed = Math.abs(ev.y / duration) + 0.2
        // 偏移
        var offset = parseInt(speed * speed * speed * speed) || 1
        // 最大索引
        var maxIndex = self['pickerList' + num].length - 1
        if (direction === 'up') {
          // 上滑动逻辑
          if (self['picker' + num].selectedIndex + offset < maxIndex) {
            self['picker' + num].selectedIndex += offset
          } else {
            self['picker' + num].selectedIndex = maxIndex
          }
          self['picker' + num].top = self['picker' + num].selectedIndex * optionHeight
        } else if (direction === 'down') {
          // 下滑动逻辑
          if (self['picker' + num].selectedIndex - offset > 0) {
            self['picker' + num].selectedIndex -= offset
          } else {
            self['picker' + num].selectedIndex = 0
          }
          self['picker' + num].top = self['picker' + num].selectedIndex * optionHeight
        }
        // 对外暴露的对象
        var dispatchParams = {
          picker1: {
            selectedIndex: self.picker1.selectedIndex,
            value: self.pickerList1[self.picker1.selectedIndex]
          },
          picker2: {
            selectedIndex: self.picker2.selectedIndex,
            value: self.pickerList2[self.picker2.selectedIndex]
          }
        }
        self.$dispatch('change', dispatchParams)
      },
      init () {
        var optionHeight = this.$el.getElementsByClassName('option')[2].clientHeight
        this.picker1.selectedIndex = this.list1DefaultIndex
        this.picker1.top = this.list1DefaultIndex * optionHeight
        this.picker2.selectedIndex = this.list2DefaultIndex
        this.picker2.top = this.list2DefaultIndex * optionHeight
      }
    }
  }

</script>
<style lang="stylus">
  @import '../assets/style/common'

  .c-picker-box
    width 100%
    height 6rem
    border-top 1px solid #cdcdcd
    border-bottom 1px solid #cdcdcd
    background #fff
    .container
      width 100%
      height 100%
      padding 0.5rem 0.32rem
      box-sizing border-box
      .picker
        width 100%
        height 100%
        position relative
        .selected-line-box
          width 100%
          height 1rem
          border-top 1px solid #cdcdcd
          border-bottom 1px solid #cdcdcd
          position absolute
          top 50%
          left 0
          transform translate3d(0, -50%, 0)
        .picker-content
          width 60%
          height 100%
          margin 0 auto
          position absolute
          left 50%
          top 0
          transform translate3d(-50%, 0, 0)
        .picker-list-box
          width 50%
          height 100%
          float left
          position relative
          .touchMask
            width 100%
            height 100%
            position absolute
            top 0
            left 0
            z-index 10
        .picker-list
          width 400%
          height 100%
          overflow-x hidden
          overflow-y hidden
          padding-right 300%
          box-sizing border-box
          -webkit-overflow-scrolling touch
          text-align center
          .option-box
            transition transform ease 0.3s
          .option
            height 1rem
            line-height 1rem
            color #919191
            font-size 0.5rem
            &.selected
              color #09b85a
</style>
